<template>
  <div class="my-tag">
    <input
      v-model="msg"
      @keydown.enter="changeItem"
      v-if="falg"
      v-focus
      class="input"
      type="text"
      placeholder="输入标签"
    />
    <div @dblclick="changeMsg" v-else class="text">{{value}}</div>
  </div>
</template>

<script>
export default {
  name: "WorkMyTag",
  props: {
    value: {
      // 类型为字符串
      type: String,
      // 必须传入
      required: true
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },

  data() {
    return {
      falg: false,
      msg: ""
    };
  },

  mounted() {},

  methods: {
    changeMsg() {
      this.falg = true;
      //因为dom的操作是异步的，所以无法在这里直接调用focus()方法
      //   document.querySelector("#wangchao").focus();
      this.msg = this.value;
      //当input框出现并获得焦点时，将数据回显到input框内
    },
    changeItem() {
      this.$emit("input", this.msg);
      this.falg = false;
    }
  }
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>